import React, { useState } from 'react';
import styles from './index.less';
import { Tabs, Col, Button, Input, Row, Card, message } from 'antd';
import { getDefaultTime, updateConfig } from './service';
import { useInViewport } from '@umijs/hooks';
import RouteMaintenance from './components/RouteMaintenance/index'; //国家航线维护
import NationalRoutes from './components/NationalRoutes/index'; //洲际航线维护

const { TabPane } = Tabs;
export default () => {
  // const [inputValue, handleInputValue] = useState('')
  // const [loading, handleLoading] = useState(false)
  const [activeKey,setActiveKey] = useState('1');
  // 保存已经加载的tab-key，用于业务页面的缓存。
  const [loadedkey,setLoadedkey] = useState('1');
  // 用于重置缓存页面的tab选中状态
  const inViewPort = useInViewport(() => document.querySelector('#pageViewId'));

  const tabChange = (key) => {
    setActiveKey(key);
    setLoadedkey(loadedkey+key);
  }
  return (
    <Card id="pageViewId">
      <Tabs onChange={tabChange}>
        {/* 国家 */}
        <TabPane tab="国家" key="1">
          {/* <RouteMaintenance></RouteMaintenance> */}
            {loadedkey.indexOf('1') > -1 ? <RouteMaintenance /> : null}
        </TabPane>
        {/* 洲际 */}
        <TabPane tab="洲际" key="2">
          {/* <NationalRoutes></NationalRoutes> */}
            {loadedkey.indexOf('2') > -1 ? <NationalRoutes /> : null}
        </TabPane>
      </Tabs>
    </Card>
  );
};
